<template>
    <div class="a">
        <van-area @cancel="left" @confirm="right" title="请选择" :area-list="areaList"
            :columns-placeholder="['请选择', '请选择', '请选择']" ref="Area" />
    </div>
</template>

<script setup lang="ts">
import { areaList } from '@vant/area-data';

import { useRouter } from 'vue-router';

// import { citylist } from '@/api';

import { ref } from 'vue';

import { showFailToast } from 'vant';


const router = useRouter()

const Area = ref()


const left = () => {
    router.go(-1)
}

const right = () => {
    const city = Area.value.getSelectedOptions()
    console.log(city[city.length - 1].text);

    console.log(Area.value.getSelectedOptions());
    if (city[city.length - 1].text == '请选择') {
        showFailToast('请选择市区')
    } else {
        localStorage.setItem('city', city[city.length - 1].text)
        router.push('/home')
    }

}

// const a = async () => {
//     const res = await citylist()
//     console.log(res);

// }
// a()

</script>

<style scoped>
.a {
    height: 100vh;
    background: rgb(255, 255, 255);
}
</style>